<template>
  <div id="app">
    <ul>
      <li>
        <span>姓名<b>*</b></span>
        <input type="text" placeholder="请输入真实姓名" v-model="bankUserName">
      </li>
      <li>
        <span>身份证号<b>*</b></span>
        <input type="text" placeholder="请输入身份证号" v-model="cardNo">
      </li>
      <li>
        <span>银行名称<b>*</b><s>?</s></span>
        <select name="" class="bank" v-model="bankCode">
          <option value="">请选择银行</option>
          <option value="">平安银行</option>
          <option value="">中国银行</option>
          <option value="">光大银行</option>
        </select>
      </li>
      <li>
        <span>银行卡号<b>*</b></span>
        <input type="text" placeholder="请输入银行卡号" v-model="bankCardNo">
      </li>
      <li>
        <span>卡号确认<b>*</b></span>
        <input type="text" placeholder="请确认银行卡号" v-model="conBankCardNo">
      </li>
      <li>
        <span>开户行<b>*</b></span>
        <select name="" v-model="province">
          <option value="">广东省</option>
        </select>
        <select name="" v-model="city">
          <option value="">广州市</option>
        </select>
      </li>
      <li>
        <span>手机号<b>*</b></span>
        <input type="text" placeholder="请输入手机号" v-model="phone">
      </li>
      <li>
        <span>验证码<b>*</b></span>
        <input type="text" placeholder="请输入验证码" v-model="smsCode">
        <a class="baseColor" @click="_Getcode">获取验证码</a>
      </li>
    </ul>
    <a class="btn" @click="_bindBankCard">确认绑定</a>
  </div>
</template>

<script>
  export default {
    name: "change-card",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
    data() {
      return {
        bankUserName: '',
        phone: '',
        bankCode: '',
        bankCardNo: '',
        conBankCardNo: '',
        province: '',
        city: '',
        code: '',
        cardNo: '',
        smsCode: ''
      }
    },
    methods: {
      _Getcode() {
        let params = {
          requestNo: '1112333232323',
          bankCardNo: '6217583600000032058',
          cardNo: '612401199505051386',
          userUid: '99201901091000000973',
          channelType: 'YIBAO',
          phone: '13928996637',
          bankUserName: '胡妮',
          requestTime: '2018041223344',
          bankCode: 'BOC',
          accountType: 'PRIVATE',
          province: '广东省',
          city: '广州市',
          sysTag: 'ssmall'
        }
        /* let params = {
           requestNo: '1112333232323',
           bankCardNo: this.bankCardNo,
           // bindOrderNo: 'PA',
           cardNo: this.cardNo,
           userUid: '99201901091000000973',
           channelType: 'YIBAO',
           phone: this.phone,
           bankUserName: this.bankUserName,
           requestTime: '2018041223344',
           bankCode: 'BOC',
           accountType: 'PRIVATE',
           province: this.province,
           city: this.city,
           sysTag: 'ssmall',
           // smsType: ''
         }*/
        let _this = this
        this.$http({
          url: '/bank/trade/bank/biz/bind',
          method: 'post',
          data: params,
          transformRequest: [function (data) {
            data = _this.$Qs.stringify(data);
            return data;
          }],
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          })
      },
      _bindBankCard() {
        let params = {
          requestNo: '1112333232323',
          channelType: 'YIBAO',
          bindOrderNo: '782019011715375415',
          userUid: '99201811271000000031',
          tradeDate: '20180410220322',
          smsCode: '746556',
          sysTag: 'ssmall',
        }
        let _this = this
        this.$http({
          url: '/bank/trade/bank/biz/bind/ack',
          method: 'post',
          data: params,
          transformRequest: [function (data) {
            data = _this.$Qs.stringify(data);
            return data;
          }],
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          })
      }

    },
    created() {
    }

  }
</script>

<style lang="less" scoped>
  #app {
    background: #fff;
    margin: 0.5rem;
    padding: 0.8rem;
    box-sizing: border-box;
    ul {
      li {
        display: flex;
        height: 2.34rem;
        border-bottom: 1px solid #dcdcdc;
        font-size: 0.597rem;
        span {
          flex: 3;
          line-height: 2.34rem;
          position: relative;
          s {
            width: 0.65rem;
            height: 0.65rem;
            position: absolute;
            background: #ff9500;
            border-radius: 50%;
            line-height: 0.65rem;
            text-align: center;
            color: #fff;
            text-decoration: none;
            top: 0.9rem;
            font-size: 0.5rem;
            right: 0.4rem;
          }
          b {
            color: #ff3824;
          }
        }
        input {
          height: 100%;
          border: 0;
          outline: none;
          flex: 7;
        }
        .bank {
          flex: 7;
          border: 0;
          outline: none;
          appearance: none;
        }
        &:nth-of-type(6) {
          select {
            flex: 3;
            margin: 0.5rem;
            border: 0;
            background: #f8f8f8;
            outline: none;
          }
        }
        &:nth-of-type(8) {
          margin-bottom: 0.8rem;
          input {
            flex: 2;
            text-align: center;
          }
          a {
            flex: 5.5;
            line-height: 2.34rem;
            text-align: right;
          }
        }
      }
    }
  }
</style>
